<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { login } from '@/api/user';

const user = ref({
  mobile: '',
  code: ''
});

const router = useRouter();

const onLogin = async function ()  {
  try {
    const res = await login(user.value);
    ElMessage.success('登录成功！');
    console.log(res);
    await router.push({ name: 'page1' });
  } catch (err) {
    console.error(err);
    ElMessage.error('登录失败，请检查手机号或验证码');
  }
};

const reset = function ()  {
  user.value.mobile = '';
  user.value.code = '';
};
</script>

<template>
  <div class="login">
    <el-input v-model="user.mobile" placeholder="请输入账号"></el-input>
    <el-input placeholder="请输入密码" v-model="user.code" show-password></el-input>
    <div class="buttons">
      <el-button type="info" @click="reset">重置</el-button>
      <el-button type="primary" @click="onLogin">登录</el-button>
    </div>
    <br>
    <el-alert
        title="账号：13888888888,密码：246810"
        type="success">
    </el-alert>
  </div>
</template>

<style scoped>
.login {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 300px;
  height: 175px;
  margin: auto;
  background: rgba(250, 246, 246, 0.41);
}
.buttons {
  display: flex;
  justify-content: center;
}
</style>
